<template>
  <div
    class="flexbox flexcolumn com_box "
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0)"
  >
    <div class="brand_head flexbox flexcenter ">
      <div class="flexbox flexcenter">
        <div
          class="brand_item flexbox flexcenter"
          @click="swichTab(item.id)"
          :class="{ active: currActive == item.id }"
          v-for="item in tabpane"
          :key="item.id"
        >
          <span class="brand_title">{{ item.nickname }}</span>
        </div>
      </div>
   
    </div>
    <div class="over_box flex">
        <div v-if="currActive==1" class="flexbox" style="height: 100%;">
            <div class="content_box" style="flex-basis: 300px;">
                <div class="gap_box">
                    <div class="list_title">品牌列表</div>
                    <div class="person_btn flexbox  flexbetween flexcenter ">
                        <el-input placeholder="输入品牌名称查询" clearable suffix-icon="el-icon-search" v-model="searchQuery" style="margin-right:12px" @input="handleSearch"></el-input>
                        <el-tooltip content="添加品牌" placement="top">               
                            <img src="@/assets/img/Icon-add.svg" alt="" class="market_icon" @click="addDialog('添加品牌')">
                        </el-tooltip>
                    </div>
                </div>
                <div class="brand_list">
                    <div v-for="item in filteredData" class="brand_list_item" :class="{ brand_active: currBrand == item }" @click="selectBrand(item)">
                        <span>{{item.brand_name}}</span><span>{{item.id}}</span>
                         <el-switch
                          v-model="item.brand_status"
                          active-color="#165DFF"
                          :active-value="1"
                          :inactive-value="0"
                          @change="changeStatus(1,item.brand_id,item.brand_status)"
                          >
                        </el-switch>
                    </div>
                </div>
            </div>
            <div class="content_box flex">
                <div class="list_title gap_box_right flexbox flexcenter flexbetween">
                    <span>产品列表</span> 
                    <div class="flexbox flexcenter" style="">
                      <div class="person_btn flexbox  flexbetween flexcenter " style="margin-top:0">
                        <el-input placeholder="输入产品名称查询" clearable suffix-icon="el-icon-search" v-model="searchBrandQuery" style="margin-right:12px" @input="handleSearch"></el-input>
                      </div>
                      <div class="flexbox flexcenter addproduct" :style="{'opacity':currBrand?'1':'0.5' }" @click="currBrand && addDialog('添加产品')">
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.8333 4.79159C10.8333 4.33135 10.4602 3.95825 9.99992 3.95825C9.53968 3.95825 9.16658 4.33135 9.16658 4.79159V9.16658H4.79159C4.33135 9.16658 3.95825 9.53968 3.95825 9.99992C3.95825 10.4602 4.33135 10.8333 4.79159 10.8333H9.16658V15.2083C9.16658 15.6685 9.53968 16.0416 9.99992 16.0416C10.4602 16.0416 10.8333 15.6685 10.8333 15.2083V10.8333H15.2083C15.6685 10.8333 16.0416 10.4602 16.0416 9.99992C16.0416 9.53968 15.6685 9.16658 15.2083 9.16658H10.8333V4.79159Z" fill="#5C636C"/></svg> 
                          添加产品
                      </div>
                    </div>
                </div>
                <div class="product_list">
                    <template v-if="currBrand && currBrand.product && currBrand.product.length > 0">
                        <div v-for="item in filteredBrandData" class="product_item flexbox flexcenter flexbetween">
                          {{item.product_name}}
                           <el-switch
                           :disabled="currBrand.brand_status === 0"
                            v-model="item.product_status"
                            active-color="#165DFF"
                            :active-value="1"
                            :inactive-value="0"
                            @change="changeStatus(2,item.product_id,item.product_status)"
                            >
                        </el-switch>
                        </div>
                    </template>
                    <div
                        v-else
                        slot="empty"
                        class="flexbox flexcenter flexcolumn flexjust"
                        style="height: 70vh"
                    >
                        <img src="../../assets/img/tabnull.svg" alt="" />
                        <div class="font_13 color_03">请先选择品牌，再查看产品数据</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else  class="channel_scene">
            <div v-for="item in ShowData">
                <div class="list_title">{{item.title}}</div>
                <div  class="flexbox brand_info_box">
                     <div class="brand_info_item" v-for="items in item.list" >
                        <div class="info_item_img">
                             <img :src=" require(`@/assets/img/product/${items.icon}.svg`)" alt="" />
                        </div>
                        <div class="line"></div>
                        <div class="info_item_name">
                         {{items.name}}
                        </div>
                    </div>
                 </div>
            </div>
            <!-- <div
                slot="empty"
                class="flexbox flexcenter flexcolumn flexjust"
                style="height: 300px"
            >
                <img src="../../assets/img/tabnull.svg" alt="" />
                <div class="font_13 color_03">暂无数据</div>
            </div> -->
        </div>
    </div>
   <SumbitDialog
        class="savedialog"
        width="400px"
        :dialogVisible.sync="dialogVisible"
        sumbitColor="#165DFF"
        sumbitText="保存"
        @onSubmit="saveProduct">
        <div slot="title">{{DialogText}}</div>
        <div v-if="DialogText.slice(2,4) == '产品' " style="color: #5C636C;margin-bottom: 12px;">所属品牌: <span style="color:#191B1E">{{currBrand.brand_name}}</span></div>
        <el-input :placeholder="`请输入${DialogText.slice(2,4)}名称`" v-model="ProductName"></el-input>
    </SumbitDialog>
  </div>
  
</template>

<script>
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
  name: "",
  data() {
    return {
      loading: false,
      searchQuery:"",
      searchBrandQuery:"",
      currActive: 1,
      currBrand: undefined,
      dialogVisible:false,
      DialogText:"",
      ProductName:"",
      tabpane: [
        {
          nickname: "品牌-产品",
          id: 1,
        },
        {
          nickname: "投放渠道/业务场景",
          id: 2,
        },
      ],
      ShowData:[
        {
            title:'投放渠道',
            list:[{
                icon:'channel_3',
                name:'巨量引擎'
            },{
                icon:'channel_1',
                name:'巨量千川'
            },{
                icon:'channel_4',
                name:'腾讯'
            },{
                icon:'channel_5',
                name:'TikTok'
            },{
                icon:'channel_2',
                name:'UD'
            },{
                icon:'channel_6',
                name:'京易投'
            }]
        },
        {
            title:'业务场景',
            list:[{
                icon:'business_scene_5',
                name:'短视频'
            },{
                icon:'business_scene_6',
                name:'直播'
            }]
        }],
      brands: [],  
    };
  },
  created() {
    this.getDataList();
  },
  components:{
    SumbitDialog
  },
  computed: {
    filteredData() {
      return this.brands.filter(item => {
        return item.brand_name.toLowerCase().includes(this.searchQuery.toLowerCase());
      });
    },
    filteredBrandData() {
      return this.currBrand.product.filter(item => {
        return item.product_name.toLowerCase().includes(this.searchBrandQuery.toLowerCase());
      });
    }
  },
  methods: {
    //  品牌/产品 启停
    async changeStatus(type,id,itemStatus){
      const { data: res } = await this.$http.post("adminapi/brandv2/bpStatus",{'type': type, 'id': id, 'status':itemStatus});
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      } else {
        if(type === 1){
          console.log(this.currBrand)
          // this.brands.forEach((e,index)=>{
          //   if(e.brand_id == id){
          //     console.log(this.brands[index])
          //     this.$set(this.brands[index],'brand_status', itemStatus)
          //   }
          // })
        }
        this.$message.success('保存成功');
      }
    },
    //选择品牌
    selectBrand(item){
        this.currBrand = item
    },

    //tab模块切换
    swichTab(index) {
      this.currActive = index;
      index == 1 && this.getDataList()
    },

    //获取品牌列表
    async getDataList() {
      this.loading = true;
      const { data: res } = await this.$http.post("adminapi/brandv2/bpList",{limit:0,range:'all'});
      if (res.code !== 200) {
        this.loading = false;
        this.$message.error(res.msg);
        return;
      } else {
        this.loading = false;
        this.brands = res.data.list;
      }
    },

    handleSearch(val) {  
      // 可以在这里添加输入时的其他逻辑  
    },  

    // 添加品牌/产品
    addDialog(name) {
        this.reset()
        this.DialogText = name;
        this.dialogVisible = true;
    },

    // 保存
   async saveProduct(){
        if(this.DialogText.slice(2,4) == '产品'){
            const { data: res } = await this.$http.post("adminapi/brandv2/productAdd",{
                brand_id: this.currBrand.brand_id,
                product_name:this.ProductName
            });
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.dialogVisible = false;
                this.currBrand.product.push({product_name:this.ProductName})
                this.$message.success("添加成功");
            }
        }else{
           const { data: res } = await this.$http.post("adminapi/brandv2/brandAdd",{
                brand_name:this.ProductName
            });
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.dialogVisible = false;
                const { data: res } = await this.$http.post("adminapi/brandv2/bpList",{limit:0,range:'all'});
                    if (res.code == 200) {
                        this.brands.unshift(res.data.list[0])
                    }
                this.$message.success("添加成功");
            }
        }
    },
    //重置 弹窗
    reset(){
        this.ProductName = "";
    }
  },
};
</script>


<style scoped>
.savedialog >>> .el-dialog__body{
    margin: 16px 0;
} 
.savedialog >>> .el-input__inner{
   border-radius: 8px;
} 
.person_btn >>> .el-input__inner {
    border-radius: 8px;
    height: 32px;
    line-height: 32px;
}
.person_btn >>> .el-input__icon{
    line-height: 32px;
}
.brand_head {
  height: 64px;
  border-bottom: 1px solid #ebebeb;
  padding: 0 20px;
}
.brand_item {
  padding: 0 20px;
  position: relative;
  cursor: pointer;
  height: 64px;
}
.brand_item::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #4475ff;
  bottom: 0;
  transform: scaleX(0);
  transition: all 0.3s;
}
.brand_title {
  font-size: 16px;
  color: #616c85;
  margin-left: 8px;
  line-height: 20px;
}
.brand_item.active::after {
  transform: scaleX(1);
}
.brand_item.active .brand_title {
  color: #4475ff;
}
.brand_item.active .fill_svg {
  fill: #4475ff;
}
.brand_item.active .stroke_svg {
  stroke: #4475ff;
}
.market_icon{
    cursor: pointer;
}
.gap_box{
    padding: 20px  20px 0;
}
.gap_box_right{
    padding: 20px 20px 12px;
}
.content_box{
    border-right: 1px solid #E8EAEC;
}
.list_title{
    color: #191B1E;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px; 
    margin: 20px 0;
}
.person_btn{
    margin-top: 12px;
}
.brand_list{
    overflow: auto;
    /* height: calc(100vh - 261px); */
    height: calc(100vh - 289px);
    padding: 0 20px 20px;
}
.brand_list_item{
    margin-top: 12px;
    display: flex;
    padding: 16px 20px;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    background: #F8F8F9;
    cursor: pointer;
     color: #191B1E;
}
.brand_list_item span:nth-child(2){
    color: #ACB2BB;
}
.brand_active{
    outline: 1px solid #165DFF;
    color: #165DFF;
    background: #e0e9ff;
    font-weight: 600;
}
.addproduct{
    cursor: pointer;
    color: #5C636C;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
    background: #FBFBFC;
    height: 36px;
    font-size: 14px;
    width: 100px;
    justify-content: center;
}
.product_list{
    overflow: auto;
    /* height: calc(100vh - 239px); */
    height: calc(100vh - 279px);
    padding: 0px 20px 20px;
}
.product_item{
    font-size: 14px;
    color: #5C636C;
    padding: 16px 20px;
    border: 1px solid #F8F8F9;
}
.product_item:first-child{
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
}
.product_item:last-child{
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
.channel_scene{
    height: 100%;
    padding: 0 20px 20px;
  
}
.brand_info_box{
    gap: 20px;
    flex-wrap: wrap;
}
.brand_info_item{
    display: flex;
    width: 136px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.info_item_img{
    height: 40px;
    width: 40px;
}
.line{
    width: 100%;
    height: 1px;
    background: #E8EAEC;
    margin: 20px 0;
}
.info_item_name{

}
</style>